<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
//自由滚动
$(function(){
var i=0;

setInterval(function(){
if(i==5){
	i=0;
}
$("#focus1 span:eq("+i+")").css({"background":"url(img/dotActive.png)"}).siblings("span").css({"background":"url(img/dot.png)"});
$("#imgs img").attr("src","img/"+i+".jpg");
i++;
},2000);
$("#focusimg").hover(function(){
  $("#focusimg span").show();
},function(){
  $("#focusimg span").hide();
});
/*箭头的点击事件*/

/*点击事件*/
$("#focus1 span").click(function(){
		$(this).css({"background":"url(img/dotActive.png)"}).siblings("span").css({"background":"url(img/dot.png)"});
	   i=$(this).index();
	   $("#imgs img").attr("src","img/"+($(this).index())+".jpg");
});
});

	</script>
	<style>
	       #focusimg{
	          border:1px solid #090;
	          position:relative;
	          width:600px;
	          left:50%;
	          margin-left:-300px;
            } 

           #imgs{
	         text-align:center;
           }

           #imgs img{
	        vertical-align:top;
	        border:none;
           }

          #focus1{
	        text-align:center;
	        position:absolute;
	        top:350px;
	        left:230px;
          }

          #focus1 span{
	          display:inline-block;
	          _display:block;
	          _float:left;
	          width:16px;
	          height:16px;
	          _overflow:hidden;
           	  background:url(img/dot.png) no-repeat;
	          margin-right:10px;
           }
            #imgs span{
            display:none;
           	position: absolute;
           	padding-top: 20px;
           	width: 30px;
           	height: 40px;
           	background:#999999;         	
           	opacity: .4;
           	top:170px;
           	cursor: pointer;
                *filter:alpha(opacity=40);
           	
           }
           #imgs span.right{
           	right: 0px;          	
           }
           #imgs span.left{
           	left:0px;
           }
 
	    </style>
</head>
<body>
	<div id="focusimg">
          <div id="imgs">
             <a href="0.html">
               <img src="img/0.jpg">
            </a>
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
          </div>
        <div id="focus1">
          <span class="s1" style="background:url(img/dotActive.png);"></span>
          <span class="s2"></span>
          <span class="s3"></span>
          <span class="s4"></span>
          <span class="s5"></span>
       </div>
       
</div>
</body>
</html>